How do I set the scrollbars for the common chart?

Question Description

Seemly to https://www.visactor.io/vchart/demo/combination/col-line， In a combined chart, where there are usually multiple axes or multiple data areas, how should I configure the scrollbars so that they control the scrolling of the specified areas? common chart scrollbar

Solution

For a simple combination chart, you can declare the scroll bar like a normal chart, just declare the property scrollBar.orient representing the position and the properties scrollBar.start and scrollBar.end representing the viewport range, as shown in the following figure: common chart scrollbar

For complex charts, you need two configuration steps:

Bind the axis to the scroll bar: Associate the scroll bar with the coordinate axis through scrollBar.axisIndex or scrollBar.axisId, so that data filtering or primitive range scrolling operations can be performed based on the coordinate axis.
Declare the layout position for the scroll bar: The chart involved in your picture is drawn based on grid layout, so the layout position of the scroll bar needs to be defined.

First, you need to add a row to the row number declaration of grid.row for horizontal scrolling.
Secondly, the layout information of the scroll bar needs to be declared in grid.elements

  {
    modelId: 'scrollBar', // id
    col: 0, // col index
    row: 6 // row index
  },

Finally, you need to match scrollBar.id with the modelId in grid.elements.

scrollBar: [
  {
    orient: 'bottom',
    axisIndex: 4,
    id: 'scrollBar',
    start: 0,
    end: 0.4
  }
];

Code Example